<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>车牌号</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <link rel="stylesheet" href="css/cph.css">
    </head>
    <body>
        <div id="vueapp">
            <license-plate v-on:plate-number="setPlateNumber"></license-plate>
        </div>
        <script type="text/x-template" id="cph-input">
            <div class="license-plate noselect">
                <div class="cph-wrap cph-wrap-shadow">
                    <span><strong style="opacity: 0">苏</strong></span><span class=""></span><span class=""></span><span class=""></span><span class=""></span><span class=""></span><span></span>
                </div>
                <div class="cph-wrap" style="z-index: 2" @click="cphInputClick">
                    <span :class="{active: (activeIndex-1)==index}" v-for="(item,index) in cph">{{item}}</span>
                </div>
                
                <transition name="slide">
                    <div class="keyboard-wrap" @click="clickBoard" v-show="show_keyboard">
                        <div class="keyboard" style="justify-content: flex-end;" v-if="activeIndex==7">
                            <span class="k-done" v-on:>完成</span>
                        </div>
                        <div v-if="activeIndex==0">
                            <div class="keyboard">
                                <span v-for="item in provice.slice(0,10)">{{ item }}</span>
                            </div>
                            <div class="keyboard">
                                <span v-for="item in provice.slice(10,19)">{{ item }}</span>
                            </div>
                            <div class="keyboard">
                                <span v-for="item in provice.slice(19,26)">{{ item }}</span>
                            </div>
                            <div class="keyboard">
                                <span v-for="item in provice.slice(26)">{{ item }}</span>
                                <span class="k-del"></span>
                            </div>
                        </div>
                        <div v-else>
                            <div class="keyboard" v-if="activeIndex > 1">
                                <span v-for="item in numbers">{{ item }}</span>
                            </div>
                            <div class="keyboard">
                                <span v-for="item in letters.slice(0,10)">{{ item }}</span>
                            </div>
                            <div class="keyboard" >
                                <span v-for="item in letters.slice(10,19)">{{ item }}</span>
                            </div>
                            <div class="keyboard">
                                <span v-for="item in letters.slice(19)">{{ item }}</span>
                                <span v-if="activeIndex>=6" style="position: absolute; left: 2px;">挂</span>
                                <span class="k-del"></span>

                            </div>
                        </div>
                    </div>
                </transition>
            </div>
        </script>
        <script src="js/vue.js"></script>
        <script>
            Vue.component('license-plate',{
                template: '#cph-input',
                data: function(){
                    return {
                        provice: ["京","津","沪","渝","翼","豫","云", "辽", "黑", "湘", "皖", "鲁", "新", "苏", "浙", "赣", "鄂", "桂", "甘", "晋", "蒙", "陕", "吉", "闵", "贵", "粤", "青", "藏", "川", "宁", "琼"],
                        numbers: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
                        letters: ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "A", "S", "D", "F", "G", "H", "J", "K", "L", "Z", "X", "C", "V", "B", "N", "M"],
                        cph: [],
                        show_keyboard: false
                    }
                },
                methods: {
                    clickBoard: function(e){
                        if(e.target.tagName.toLowerCase()=='span'){
                            if(e.target.className.indexOf('k')== -1 && this.cph.length < 7){
                                this.cph.push(e.target.textContent)
                            }

                            if(e.target.className=='k-del'){
                                this.cph.pop()
                            }

                            if(e.target.className=='k-done'){
                                // this.setPlateNumber(this.cph)
                                this.cphInputClick()
                                this.$emit('plate-number',this.cph)
                            }
                        }
                    },
                    cphInputClick: function(){
                        this.show_keyboard = !this.show_keyboard
                    }
                },
                computed: {
                    activeIndex: function() {
                        return this.cph.length
                    }
                }
            })

            var app = new Vue({
                el: '#vueapp',
                data: {
                    message: 'hello'
                },
                methods: {
                    setPlateNumber: function(arr){
                        alert(arr.join(''))
                        console.log(arr.join(''))
                    }
                }
            })
        </script>
    </body>
</html>
